<template>
	<view class="info">

		<view class="border" :class="{'active':ifWrite}" ref='border'>
			<view class="base-info">
				<text>基本信息</text>
				<view class="base-info-right">
					<text v-if="!ifWrite" class="save-info" @click="getWrite()">编辑</text>
					<text v-else class="save-info" @click="sendMyInformation()">保存</text>
				</view>
			</view>
			<view class="info-list">
				<!-- 修改头像@tap="changeTou" -->
				<view class="list-one">
					<text class="list-content">卡片</text>
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					    <image class="one-img" :src="cropFilePath" mode="aspectFit"></image>
					</button>
					<!-- <image class="one-img" :src="cropFilePath" mode="aspectFit"></image> -->
				</view>
			</view>
			<view class="info-list">
				<view class="list-one">
					<text class="list-content">昵称</text>
					<text class="content-name">{{name}}</text>
				</view>
			</view>
			<view class="info-list" @tap="changePhone">
				<view class="list-one">
					<text class="list-content">手机号</text>
					<text class="content-phone">{{phone}}</text>
					<text class="left">{{icons.dayuhao}}</text>
				</view>
			</view>
			<!-- <view class="info-list" @tap="changeSex">
				<view class="list-one">
					<text class="list-content">性别</text>
					<text class="content-name">{{gender | formatGender}}</text>
					<text class="left">{{icons.dayuhao}}</text>
				</view>
			</view>
			<view class="info-list" @tap="changeDate">
				<view class="list-one">
					<text class="list-content">出生日期</text>
					<text class="content-name">{{date}}</text>
				</view>

			</view> -->
			<view class="info-list" @tap="changeAddress">
				<view class="list-one">
					<text class="list-content">地区</text>
					<text class="content-name">{{address}}</text>
					<text class="left">{{icons.dayuhao}}</text>
				</view>
			</view>
			<view class="info-list">
				<view class="list-one">
					<text class="list-content">详细地址</text>
					<view class="content-name">
						<u-input v-model="detailAddress" type="text" :border="false" input-align="right" placeholder="请填写详细地址" :disabled="disabled"/>
					</view>
					<text class="left">{{icons.dayuhao}}</text>
				</view>
			</view>
			<view class="info-list">
				<view class="list-one">
					<text class="list-content">车位号</text>
					<view class="content-name">
						<u-input v-model="carAddress" type="text" :border="false" input-align="right" placeholder="请填写车位号" :disabled="disabled"/>
					</view>
					<text class="left">{{icons.dayuhao}}</text>
				</view>
			</view>
		</view>
		<mpvue-citypicker type="bottom" :showPicker="showPicker" @onConfirm="addComfirm" ref="uniAddress">

		</mpvue-citypicker>
		<!-- 裁剪 -->
		<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
		<!-- 头像 -->
		<uni-popup :animation="animation" type="bottom" ref="uniTou">
			<view class="uptou">
				<view class="uptou-one" @tap="photoUp">
					<div class="uptou-one-icon">{{icons.paizhao}}</div>
					<div class="uptou-one-name">拍照上传头像</div>
				</view>
				<view class="uptou-one" @tap="pictureUp">
					<div class="uptou-one-icon">{{icons.xiangce}}</div>
					<div class="uptou-one-name">相册上传头像</div>
				</view>
			</view>
		</uni-popup>
		<!-- 修改名字 -->
		<uni-popup :animation="animation" type="center" ref="uniPhone">
			<view class="change-name">
				<div class="name-one">修改手机号码</div>
				<div class="name_input">
					<input type="text" @input="commitPhone" :focus="focusPhone" class="name-two" :placeholder="phone">
				</div>
				<view class="name-three">
					<view class="name-no" @tap="cancelPhone">取消</view>
					<view class="name-yes" @tap="comfirmPhone">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 性别 -->
		<uni-popup :animation="animation" type="center" ref="uniSex">
			<view class="change-sex">
				<view v-for="(sexs,index) in sex" :key="index" @tap="chooseSex(sexs,index)"
					:class="[{'sexs':sexs!=resex},{'sexs_zhong':sexs==resex}]">
					<view>{{sexs}}</view>
				</view>
			</view>
		</uni-popup>
		<!-- 出生日期 :visible.sync="visible1"-->
		<u-picker mode="time" v-model="dateShow" @confirm="Confirmdate"></u-picker>
		<!-- <w-picker ref="datepicker" mode="date" startYear="1949" endYear="2100" :value="date" :current="true" fields="day"
			@confirm="Confirmdate($event,'date')" :disabled-after="true"></w-picker> -->
		<uni-popup :animation="animation" type="center" ref="uniDate">
			<view class="change-name">
				<text class="name-one">修改出生日期</text>
				<input type="text" class="name-two" @input="commitDate" :placeholder="date">
				<view class="name-three">
					<text class="name-no" @tap="cancelDate">取消</text>
					<view class="name-choose"></view>
					<text class="name-yes" @tap="comfirmDate">确认</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ImageCropper from '../components/invinbg-image-cropper/invinbg-image-cropper.vue';
	export default {
		components: {
			ImageCropper
		},
		data() {
			return {
				tempFilePath: '',
				cropFilePath: '',
				name: "",
				phone: "",
				sex: [
					"保密",
					"男",
					"女"
				],
				date: "",
				address: "广东省/珠海市/香洲区",
				detailAddress: '',
				carAddress: '',
				animation: true,
				rePhone: "",
				resex: "",
				gender: 0,
				redate: "",
				readdress: "",
				showPicker: false,
				img: "../../static/logo.png",
				show: false,
				getSrc: '',
				ifWrite: false,
				icons: '',
				icon: '',
				user: '',
				user_key: '',
				yhpz: '',
				toBase64Url: '',
				url: '', //接口地址
				focusPhone: false,
				userInfo: [],
				userData: [],
				userId: 0,
				dateShow: false,
				disabled: true
			}
		},
		onLoad() {
			//获取icons
			this.icons = uni.getStorageSync('icons');
			this.url = uni.getStorageSync('URL');
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.userData = uni.getStorageSync('userData')
			this.userId = this.userData.id
			// this.name = this.userInfo.nickName;
			// this.cropFilePath = this.userInfo.avatarUrl;
			// 获取个人用户信息
			this.getMyInformation()
			
		},
		methods: {
			// 选择头像
			chooseavatar(e){//选择微信头像
				const { avatarUrl } = e.detail
				console.log(avatarUrl)
				this.cropFilePath = e.detail.avatarUrl;
			},
			Confirmdate(e) {	
				this.date = e.year + '-' + e.month + '-' + e.day;
				console.log(e)
			},
			// 编辑信息 
			getWrite() {
				this.ifWrite = true;
				this.disabled = false;
			},
			// 获取信息
			getMyInformation() {				
				uni.request({
					url: this.url + 'home/user/User/getUserDetail',
					method: 'POST',
					data: {
						busid: this.userId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.statusCode === 200){
							uni.setStorageSync('userData', res.data.data)
							let result = res.data.data
							this.phone = result.mobile
							this.gender = result.gender
							this.date = result.birthday
							this.address = result.address
							this.name = result.nickname
							this.cropFilePath = result.userhead
							this.detailAddress = result.detailAddress
							this.carAddress = result.carAddress
						}
					},
				})
			},
			// 提交信息
			sendMyInformation() {
				this.ifWrite = false;
				this.disabled = true;
				let that = this;
				uni.request({
					url: this.url + 'home/user/User/information',
					method: 'POST',
					data: {
						busid: this.userId,
						mobile: this.phone,
						address: this.address,
						userhead: this.cropFilePath,
						detailAddress: this.detailAddress,
						carAddress: this.carAddress,
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					success: function(res) {
						that.getMyInformation()
					},
					fail: function(err) {
						console.log(err)
					}
				})
			},
			changeTou() {
				if (this.ifWrite) {
					this.$refs.uniTou.open();
				} else return
			},
			changePhone() {
				if (this.ifWrite) {
					this.focusPhone = true;
					this.$refs.uniPhone.open();
				} else return
			},
			changeSex() {
				if (this.ifWrite) {
					this.$refs.uniSex.open();
				} else return
			},
			changeDate() {
				if (this.ifWrite) {
					// this.$refs.datepicker.show();
					this.dateShow = true
				} else return
			},
			changeAddress() {
				if (this.ifWrite) {
					this.$refs.uniAddress.show();
				} else return
				// this.showPicker = true;
				// console.log(1);
			},
			commitPhone(Phone) {
				this.rePhone = Phone.detail.value;
			},
			cancelPhone() {
				this.$refs.uniName.close();
			},
			comfirmPhone() {
				this.phone = this.rePhone;
				this.$refs.uniPhone.close();
			},
			chooseSex(sexs,index) {
				this.gender = index;
				this.$refs.uniSex.close();
			},
			cancelDate() {
				this.redate = ""
				this.$refs.uniDate.close();
			},
			commitDate(date) {
				this.redate = date.detail.value;
			},
			comfirmDate() {
				this.date = this.redate;
				this.$refs.uniDate.close();
			},
			addComfirm(e) {
				console.log(e);
				this.address = e.label;
				this.showPicker = false;
			},
			confirm(e) {
				this.tempFilePath = '';
				uni.uploadFile({
					url: this.url + '/information_data.php', //仅为示例，非真实的接口地址
					filePath: e.detail.tempFilePath,
					name: 'file',
					formData: {
						user: this.user,
						user_key: this.user_key,
						yhpz: this.yhpz,
						type: 'head',
					},
					header: {
						"content-type": "multipart/form-data"
					},
					success: (uploadFileRes) => {
						this.cropFilePath = e.detail.tempFilePath;
					}
				});


				this.$refs.uniTou.close();
			},
			cancel() {
				console.log(45454)
				this.$refs.uniTou.close();
				console.log('canceled')
			},
			// 照相
			photoUp() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'],
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift();

					}
				});
				this.$refs.uniTou.close();
			},
			pictureUp() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift();
					},
				});
				this.$refs.uniTou.close();
			}
		},
		filters: {
			formatGender: function(str) {// 格式化科室
				const gender = {
					"2": "女",
					"1": "男",
					"0": "保密"
				}
				return gender[str];
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: $bgcolor-black-9;
	}
	.avatar-wrapper {
		border: none; /* 取消边框 */
		background: transparent; /* 设置背景为透明 */
		padding: 0; /* 取消内边距 */
		outline: none; /* 取消点击时的外边框 */
	}
	.active {
		height: 97vh;
		border: 1px solid $color-all;
		padding: 0px 0px;
		width: 96%;
		box-sizing: border-box;
		text-align: center;
		margin: 1.5vh auto;
		text-align: left;
		border-radius: 10upx;
	}

	.change-sex {
		width: 400upx;
		overflow: hidden;
		background-color: $bgcolor-white-0;
		border-radius: 10upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: $color-black-0;
		font-size: 28upx;

		.sexs {
			width: 100%;
			border-bottom: 2upx solid $color-black-9;
			text-align: center;
			box-sizing: border-box;
			line-height: 100upx;
			height: 100upx;
			color: $color-black-2;
		}

		.sexs_zhong {
			width: 100%;
			border-bottom: 2upx solid $color-black-9;
			text-align: center;
			box-sizing: border-box;
			line-height: 100upx;
			height: 100upx;
			color: $color-all;
		}

	}

	.change-name {
		width: 550rpx;
		background-color: $bgcolor-white-0;
		border-radius: 10upx;
		display: flex;
		flex-wrap: wrap;

		.name_input {
			height: 80upx;
			width: 90%;
			margin: 20upx auto;
			border-radius: 8upx;
			border: 1upx solid $color-black-8;

			.name-two {
				width: 90%;
				padding: 0upx 5%;
				height: 100%;
			}
		}

		.name-one {
			width: 100%;
			font-size: $color-size-6;
			font-weight: 600;
			color: $color-black-2;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
		}



		.name-three {
			width: 100%;
			border-top: 1upx solid $color-black-8;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			flex: 1;
			align-items: center;

			.name-no {
				color: $color-black-0;
				font-size: 31upx;
				flex-basis: 50%;
				text-align: center;
				font-weight: 600;
				border-right: 1px solid $color-black-9;
				height: 100upx;
				line-height: 100upx;
			}

			.name-yes {
				color: $color-blue-2;
				font-size: 31upx;
				flex-basis: 50%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-weight: 600;
			}

			.name-choose {
				height: 50upx;
				width: 2upx;
				background-color: $uni-border-color;
			}

		}
	}

	.info {
		.uptou {
			width: 100%;
			height: 200upx;
			background-color: #fff;
			line-height: 80upx;
			text-align: center;
			font-size: 28upx;

			.uptou-one {
				border-bottom: 2upx solid $color-black-8;
				display: flex;
				justify-content: center;

				.uptou-one-icon {
					height: 100upx;
					line-height: 100upx;
					text-align: center;
					font-size: $color-sizeicon-12;
					font-family: iconfont;
				}

				.uptou-one-name {
					height: 100upx;
					width: 100px;
					line-height: 100upx;
					text-align: center;
					font-size: $color-size-4;
				}
			}
		}

		.base-info {
			font-size: $color-size-5;
			height: 100upx;
			padding: 0upx 3%;
			line-height: 100upx;
			background-color: $color-all;
			display: flex;
			justify-content: space-between;
			color: $color-white-0;

			.base-info-right {
				color: $color-white-0;

				.write-info {
					margin-right: 60upx;
				}

				.save-info {
					margin-right: 10upx;
				}
			}
		}

		.info-list {
			background-color: $bgcolor-white-0;
			font-weight: 500;

			// .change-address{
			// 	height: 400upx;
			// 	background-color: #FFFFFF;
			// 	font-size: 28upx;
			// 	color: #3399FF;
			// 	.address-top{
			// 		border-bottom: 2upx solid #CCCCCC;
			// 		display: flex;
			// 		justify-content: space-between;
			// 		padding: 20upx;
			// 	}
			// }




			.list-one {
				display: flex;
				height: 100upx;
				font-size: 28upx;
				padding: 20upx 0upx;
				margin-left: 20upx;
				border-bottom: 2upx solid $color-black-9;
				align-items: center;

				.list-content {
					flex-grow: 1;
				}

				.left {
					color: $uni-text-color-grey;
					font-family: iconfont;
					padding-right: 10px;
				}

				.content-phone {
					color: $uni-text-color-grey;
					padding-right: 28upx;

				}

				.content-name {
					padding-right: 28upx;
					color: $uni-text-color-grey;
				}

				.one-img {
					height: 60upx;
					width: 60upx;
					border-radius: 60upx;
					margin-right: 20upx;
				}
			}

		}

	}
</style>